<!DOCTYPE HTML>
<html>
<head>
<!--jQuery dependencies-->
    <link rel="stylesheet" href="../../pqgrid/css/jquery-ui-base-1.9.1.css" />
    <script src="../../pqgrid/js/jquery-1.9.1.min.js"></script>    
    <script src="../../pqgrid/js/jquery-ui-1.9.2.min.js"></script>
<!--PQ Grid files-->
    <link rel="stylesheet" href="../../pqgrid/pqgrid.min.css" />
    <script src="../../pqgrid/pqgrid.min.js"></script>
<!--PQ Grid Office theme-->
    <link rel="stylesheet" href="../../pqgrid/themes/office/pqgrid.css" />

<script>
    $(function () {

        var colM = [
        { title: "ShipCountry", width: 100, dataIndx:"ShipCountry" },
        { title: "Customer Name", width: 130, dataIndx:"ContactName" },
        { title: "Order ID", width: 100, dataIndx:"OrderID",  dataType:"integer" },
		{ title: "Order Date", width: "100", dataIndx:"OrderDate", dataType:"date" },
		{ title: "Required Date", width: 100 , dataIndx:"RequiredDate",  dataType:"date"},
		{ title: "Shipped Date", width: 100, dataIndx:"ShippedDate",  dataType:"date" },
		{ title: "Shipping Via", width: 100, dataIndx:"ShipVia" },
        { title: "Freight", width: 100, align: "right", dataType:"float", dataIndx:"Freight" },
        { title: "Shipping Name", width: 160, dataIndx:"ShipName" },
        { title: "Shipping Address", width: 200, dataIndx:"ShipAddress" },
        { title: "Shipping City", width: 100, dataIndx:"ShipCity" },
        { title: "Shipping Region", width: 130,dataIndx:"ShipRegion" },
        { title: "Shipping Postal Code", width: 130, dataIndx:"ShipPostalCode" }
		];
        var dataModel = {
            location: "remote", 
            sorting: "local",
            url:"/Content/orders.json",             
            sortIndx: ["ShipCountry", "ContactName", "ShipVia" ],
            sortDir: ["up", "down", "up"]
            //sortIndx: "ShipCountry",
            //sortDir: "up"
        }
        var $grid = $("div#grid_local_sorting").pqGrid({ 
            width: 800, height: 400,
            dataModel: dataModel,            
            numberCell:{resizable:true, title: "#", minWidth:20, width:30},
            colModel: colM,
            pageModel: {type:'local', rPP: 50},
            title: "Shipping Orders local sorting",
            columnBorders:false,
            resizable: true,            
            freezeCols: 2,
            selectionModel:{type:''},
            showBottom:false,
            hwrap:false,
            wrap:false
        });
        //bind the select list.
        $("#grid_local_sorting_select").change(function(evt){            
            var val=$(this).val();            
            var DM = $grid.pqGrid("option", "dataModel");
            if(val=="multiple"){                        
                DM.sortIndx = [DM.sortIndx];
                DM.sortDir = [DM.sortDir];                
            }
            else{
                DM.sortIndx = DM.sortIndx[0];
                DM.sortDir = DM.sortDir[0];                
            }
            $grid.pqGrid("option", "dataModel", DM);
            $grid.pqGrid("refreshDataAndView");
        });
    });
        
</script>    
</head>
<body>

<div style="margin: auto; width: 250px; margin-bottom: 20px;">
        Sorting type:
        <select id="grid_local_sorting_select">
            <option value="single">Single Column</option>
            <option value="multiple" selected="">Multiple Column</option>
        </select>
    </div>
    <div id="grid_local_sorting" style="margin: auto;">
    </div>

</body>

</html>
